<!--
 * Copyright 2019 Hiro Hashimukai on the ia-cloud project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->

<script type="text/html" data-template-name="PLC-Mitsubishi-AE">

    <div id="PLC-com-block">
        <!-- 隠しのNodeプロパティ -->
        <input type="hidden" id="node-input-configReady">
        <!-- modbus node（設定Node）の選択-->
        <div class="form-row">
            <label for="node-input-comNode" style= "vertical-align: middle;">
                <span data-i18n="editor.modbusNode"></label>
            <input type="text" style="width: 300px" id="node-input-comNode">
        </div>
    </div>
    <!-- Tab, ownself -->
    <div class="form-row">
        <ul style="min-width: 500px; margin-bottom: 20px;" id="red-tabs">
        </ul>
    </div>
    <!-- Tab contents -->
    <div id="plc-tabs-content" style="min-height:250px;">

        <!-- tab-object-properties starts -->
        <div id="tab-object-properties" class="tab-pane">
            <!-- object propertyの設定 -->
            <div class="form-group" style="margin-left: 20px; margin-top:8px";>
                <div class="form-row">
                    <label style="margin-right: 10px;" for="node-input-storeInterval">
                        <span data-i18n="editor.period"></span></label>
                    <input type="number" id="node-input-storeInterval" min="0" step="10"
                        value="0" style="display: inline-block; width: auto;">
                    <label for="node-input-storeAsync" style="margin-left: 20px;">
                        <span data-i18n="editor.async"></span></label>
                    <input type="checkbox" checked="checked" id="node-input-storeAsync"
                        style="display: inline-block; width: auto;">
                </div>
                <div class="form-row">
                    <label style="margin-right: 10px;"
                        for="node-input-objectKey"><span data-i18n="editor.objectKey"></span></label>
                    <input class="form-control" type="text" style="width: 300px"
                    id="node-input-objectKey" data-i18n="[placeholder]editor.objectKeyholder">
                </div>
                <div class="form-row">
                    <label style="margin-right: 10px;"
                        for="node-input-objectdescription"><span data-i18n="editor.objectDescription"></span></label>
                    <input type="text" style="width: 300px" id="node-input-objectDescription">
                </div>
                <hr>
                <div class="form-row">
                    <label for="node-input-qInfo"><span data-i18n="editor.qInfo"></span></label>
                    <input type="checkbox" id="node-input-qInfo" style="display: inline-block; width: auto;" >
                </div>  
            </div>
        </div>
        <!-- tab-object-properties ends -->

        <!-- tab-AnE-properties starts -->
        <div id="tab-AnE-properties">
            <!-- A&E Item propertyの設定 -->
            <div class="form-row" style="margin-top:8px;">
                <label for="node-input-contentType">
                    <span data-i18n="editor.contentType"></span></label>
                <input type="text" id="node-input-contentType" value="Alarm&Event" disabled="disabled">
            </div>
            <div class="form-row node-input-AnEcontainer-row">
                <ol id="node-input-AnEcontainer">
                </ol>
            </div>
        </div>  
        <!-- tab-AnE-properties ends -->      
    </div>

    <div id="PLC-name-block">
        <hr>
        <div class="form-row">
            <label for="node-input-name" ><i class="fa fa-tag"></i><span data-i18n="editor.name"></span></label>
            <input type="text" class="form-control" id="node-input-name" data-i18n="[placeholder]editor.name">
        </div>
    </div>

    <!-- PLC-mitsubishi-AE device type definition -->
    <div style="display:none" id="deviceTypeDef">
        <!-- PLC-mitsubishi-AE device setect options -->
        <div id="deviceDef" >
            <option selected="selected" value="M" data-i18n="[text]editor.dev-M"></option>
            <option value="X" data-i18n="[text]editor.dev-X"></option>
            <option value="Y" data-i18n="[text]editor.dev-Y"></option>
            <option value="L" data-i18n="[text]editor.dev-L"></option>
            <option value="B" data-i18n="[text]editor.dev-B"></option>
            <option value="SM" data-i18n="[text]editor.dev-SM"></option>
            <option value="D" data-i18n="[text]editor.dev-D"></option>
            <option value="W" data-i18n="[text]editor.dev-W"></option>
        </div>
    </div>
    <!-- PLC-mitsubishi-AE new dataItem defaults -->
    <!-- jQuery's data attribute can't be upper case, must be lower case-->
    <div style="display:none" id="defaultDataItem" data-itemtype="AnE" data-commonname="Alarm&Event"></div>
    <div style="display:none" id="defaultAnE" data-devicetype="M"
        data-address="0" data-logic="pos" data-anecode="" data-anedesc=""></div>

</script>

<script type="text/javascript">

    // httpAdmin で作成したエンドポイントからPLC通信設定Nodeの共通スクリプトを読み込み
    $.getScript("PLCAnE.script").done(function(script, textStatus){
        
        // Node登録オブジェクトのシャローコピー
        let cfg = Object.assign({}, PLCAENodeConfig);
        // デフォルトプロパティのシャローコピー
        let dflts = Object.assign({},cfg.defaults);

        // Nodeプロパティーのデフォルト設定を上書き
        dflts.comNode = {value: "", type: "Mitsubishi-com", required: true};
        dflts.contentType = {value: "Alarm&Event"};

        // デフォルトプロパティを付け替え
        cfg.defaults = dflts;

        // NodeをNode-REDへ登録
        RED.nodes.registerType('PLC-Mitsubishi-AE', cfg);
    });

</script>